<template>
  <div class="container">
    <div class="app-container">
      <el-button type="primary" size="mini" class="btn-add" @click="addPermission">添加权限</el-button>
      <el-table :data="tableData" row-key="id" :border="true" default-expand-all :tree-props="{children: 'children', }" style="width: 100%;margin-bottom: 20px;">
        <el-table-column label="名称" prop="name"></el-table-column>
        <el-table-column label="标识" prop="code"></el-table-column>
        <el-table-column label="描述"  prop="description"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              v-if="scope.row.type==1"
              @click="addSon(scope.row.id)">添加</el-button>
            <el-button
              size="mini"
              @click="handleEdit(scope.row.id)">编辑</el-button>
            <el-popconfirm
              title="确定要删除该数据吗？" @onConfirm="handleDelete(scope.row)">
              <el-button
              size="mini"
              type="danger"
              slot="reference"
              style="margin-left: 10px;" >删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <Dialog :dialogVisible.sync="flag" :title="title" @initData="init" :fatherID.sync="id"  :data.sync="data"></Dialog>
  </div>
</template>
<script>
import {getPermissions,deletePermissions,getDetailPermissions} from '@/api/permissions'
import {transListToTreeData} from '@/utils/index'
import Dialog from './components/dialog.vue'
export default {
  name: 'Permission',
  components:{
    Dialog
  },
  data() {
    return {
      tableData:[],
      flag:false,
      title:'',
      id:'',
      data:{}
    }
  },
  async created() {
    await this.init()
  },
  methods:{
    // 添加权限
    addPermission() {
      this.flag=true
      this.title='新增权限点'
    },
    // 初始化
    async init() {
      const list=await getPermissions()
      const data=transListToTreeData(list,0)
      this.tableData=data
    },
    // 删除权限点
    async handleDelete(row) {
      await deletePermissions(row.id)
      await this.init()
      this.$message({
        message: '删除成功',
        type: 'success'
      })
    },
    // 增加子权限
    addSon(id) {
      this.flag=true
      this.title='新增权限点'
      this.id=id
    },
    // 编辑权限
    async handleEdit(id) {
      this.data=await getDetailPermissions(id)
      this.flag=true
      this.title='编辑权限点'
    }
  }
}
</script>

<style>
.btn-add {
  margin: 10px;
}
</style>